<script setup lang="ts">
import historyMessageHooks from '@/hooks/historyMessageHooks'
import { CommunicateRecords } from '@/models/historyMessageModels'
import NotData from '@/components/NotData.vue'

const { ...callback } = historyMessageHooks()

const justLookMe = ref<number>(0)
const props = defineProps<{
  studentId: number
  mobile: string
}>()
const paging = ref()
const listData = ref<CommunicateRecords[]>([])

watch(
  () => props.studentId,
  () => {
    if (props.studentId !== undefined) {
      refresh()
    }
  },
)

function refresh() {
  paging.value?.refresh()
}

function onClickLookMe() {
  justLookMe.value === 0 ? (justLookMe.value = 1) : (justLookMe.value = 0)
  refresh()
}

async function query(page: number, per_page: number) {
  if (props.studentId !== undefined) {
    const listData = await callback.crmRecords(
      props.studentId,
      props.mobile,
      justLookMe.value,
      page,
      per_page,
    )
    paging.value.complete(listData)
  }
}
</script>

<template>
  <view class="round-corners mt-3" style="min-height: 30vh">
    <view class="linear-hor" style="padding: 24rpx" @click="onClickLookMe">
      <view v-if="justLookMe === 1" class="check-icon"></view>
      <view v-else class="not-check-icon"></view>
      <span style="margin-left: 24rpx" />
      <wd-text text="仅看我的沟通" color="#2B2F36" size="28rpx" />
    </view>
    <view
      style="
        width: calc(100% - 64rpx);
        height: 2rpx;
        margin: 0 32rpx 32rpx 32rpx;
        background: #ebedf2;
      "
    />
    <view class="scroll-views">
      <z-paging
        ref="paging"
        loading-more-no-more-text="没有更多了"
        v-model="listData"
        @query="query"
        :fixed="false"
        :default-page-size="10"
      >
        <template #empty>
          <NotData text="暂无数据"></NotData>
        </template>
        <view class="list" v-for="(item, index) in listData" :key="index">
          <view
            class="linear-hor"
            style="position: relative; align-items: start; padding: 0 24rpx; margin-bottom: 16rpx"
          >
            <view
              style="display: flex; flex-direction: column; align-items: center; margin-top: 3rpx"
            >
              <view class="circle-container">
                <view class="circle circle-outer"></view>
                <view class="circle circle-inner"></view>
              </view>
              <view class="vertical-line" />
            </view>
            <view style="width: calc(100%)">
              <view
                class="linear-hor"
                style="position: relative; width: calc(100%); margin-left: 16rpx"
              >
                <wd-text :text="item.create_time" color="#6A707C" size="28rpx" />
                <span class="spacer" />
                <view style="margin-right: 24rpx">
                  <wd-text
                    :text="'跟进人：' + item.follow_employee_name"
                    size="28rpx"
                    color="#6A707C"
                  />
                </view>
              </view>
              <view
                class="round-corners-gray"
                style="
                  width: calc(100% - 72rpx);
                  min-height: 80rpx;
                  margin-top: 24rpx;
                  margin-left: 16rpx;
                  word-break: break-all;
                "
              >
                <text style="font-size: 28rpx; color: #6a707c">
                  {{ item.remark }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<style scoped lang="scss">
.round-corners {
  background: white;
  border-radius: 16rpx;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.linear-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx;
}

.check-icon {
  width: 40rpx;
  height: 40rpx;
  background: url('@/static/images/history/check-icon.png') no-repeat;
  background-size: 100% 100%;
}

.not-check-icon {
  width: 40rpx;
  height: 40rpx;
  background: url('@/static/images/index/not-check-icon.png') no-repeat;
  background-size: 100% 100%;
}

.circle-container {
  position: relative;
  width: 32rpx;
  height: 32rpx;
}

.circle {
  position: absolute;
  border-radius: 50%;
}

.circle-outer {
  width: 100%;
  height: 100%;
  background: #18cb7f;
  opacity: 0.1;
}

.circle-inner {
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  background: #18cb7f;
}

.vertical-line {
  position: absolute;
  top: 44rpx;
  bottom: 0;
  width: 0;
  border: 2rpx dashed #c2c7d1;
}

.spacer {
  flex-grow: 1;
}

.round-corners-gray {
  padding: 24rpx;
  background: #f8f9fb;
  border-radius: 16rpx;
}

.scroll-views {
  height: calc(100vh - 466rpx);
}
</style>
